<template>
    <layout>
        <mt-swipe :auto="4000" v-if="banner">
            <mt-swipe-item v-for="(data,index) in banner" :key="index" @click.native="location(index)">
                <img :src="showImage(data.url)">
            </mt-swipe-item>
        </mt-swipe>

        <div class="new_box">

            <img :src="showImage('/edu/img/news.png')" />

            <div class="marquee_box">
                <ul class="marquee_list" :class="{marquee_top:animate}">
                    <li v-for="(item, index) in notice">
                        <a :href="'/notice/detail/' + item.id">
                            <span>{{item.title}}</span>
                        </a>
                    </li>
                </ul>
            </div>


        </div>

        <mt-navbar class="page-part" v-model="selected">
            <mt-tab-item id="1">
                <div class="selet_top">最新资讯</div>
                <div class="selet_bt"></div>
            </mt-tab-item>
            <mt-tab-item id="2">
                <div class="selet_top">猜你喜欢</div>
                <div class="selet_bt"></div>

            </mt-tab-item>
        </mt-navbar>

        <mt-tab-container v-model="selected">
            <mt-tab-container-item id="1">
                <div class="item-container">
                    <a :href="'/information/' + item.id" class="list-box" v-for="(item, index) in education" :key="index">
                        <div class="list-img">
                            <img :src="api.image + item.imageUrl">
                        </div>
                        <div class="list-p">
                            <span class="row tit">{{item.title}}</span>
                            <span class="row intro">{{item.intro}}</span>
                            <span class="row info">
                                <div class="left">{{item.informationTypeName}}</div>
                                <div class="right">{{item.commentCount}}回复</div>
                            </span>
                        </div>
                    </a>
                </div>

            </mt-tab-container-item>
            <mt-tab-container-item id="2">
                <div class="item-container">
                    <a :href="'/information/' + item.id" class="list-box" v-for="(item,index) in like" :key="index">
                        <div class="list-img">
                            <img :src="api.image + item.imageUrl">
                        </div>
                        <div class="list-p">
                            <span class="row tit">{{item.title}}</span>
                            <span class="row intro">{{item.intro}}</span>
                            <span class="row info">
									<div class="left">{{item.informationTypeName}}</div>
									<div class="right">{{item.commentCount}}回复</div>
								</span>
                        </div>
                    </a>
                </div>
            </mt-tab-container-item>
        </mt-tab-container>


    </layout>
</template>
<style lang="scss">
    @import "index.scss";
</style>
<script type="text/babel">
    import { api, image } from 'framework/config.js';
    import Layout from "component/layout/standard";

    import Vue from 'vue'
    import Mint from 'mint-ui';

    Vue.use(Mint);

    export default {
        components: {
            Layout
        },
        data(){
            return {
                selected: '1',
                animate: false,
            }
        },
        computed: {
            api(){
                return api();
            }
        },
        methods: {
            showImage(url, params){
                return image(this.api.image, url, params);
            },
            location(index){
                let data = this.banner[index];
                console.log(data.type);
                if (data.type == 1){
                    window.location.href = `/information/${data.objectId}`;
                }else if (data.type == 2){
                    window.location.href = `/forum/detail/${data.objectId}`;
                }else if (data.type == 3){

                }
                window.location.href = `/information/${data.objectId}`;
            },
            showMarquee: function () {

                if(this.notice.length <=1 ){
                    this.animate = false;
                }else{
                    this.animate = true;
                    setTimeout(()=>{

                        this.notice.push(this.notice[0]);
                        this.notice.shift();
                        this.animate = false;
                    },500)}
            },



        },
        created: function() {
            setInterval(this.showMarquee, 2000)
            console.group('created 创建完毕状态===============》');
        },
        mounted() {
        },

    }
</script>

